<template>
    <div>
        <el-form inline>
            <el-form-item label="搜索">
                <el-input placeholder="请输入标题关键字" v-model="searchParams.searchValue" clearable></el-input>
            </el-form-item>
            <el-form-item style="width: 210px;" label="类型" clearable>
                <el-select placeholder="请选择类型" v-model="searchParams.type">
                    <el-option value="生鲜" label="生鲜"></el-option>
                    <el-option value="水果" label="水果"></el-option>
                    <el-option value="冷饮" label="冷饮"></el-option>
                    <el-option value="甜品" label="甜品"></el-option>
                    <el-option value="鲜花" label="鲜花"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="评分最小值">
                <el-input type="number" placeholder="评分最小区间" v-model="searchParams.minScore" clearable></el-input>
            </el-form-item>
            <el-form-item label="评分最大值">
                <el-input type="number" placeholder="评分最大区间" v-model="searchParams.maxScore" clearable></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getData">搜索</el-button>
            </el-form-item>
        </el-form>

        <el-button @click="openDialog('添加')">添加</el-button>
        <el-table :data="list" style="width: 100%" height="600">
            <el-table-column prop="id" label="id"></el-table-column>
            <el-table-column prop="shopName" label="名称"></el-table-column>
            <el-table-column prop="shopTel" label="电话"></el-table-column>
            <el-table-column prop="shopScore" label="评分"></el-table-column>
            <el-table-column prop="shopType" label="类型"></el-table-column>
            <el-table-column prop="shopImage" label="图片">
                <template #default="{ row }">
                    <img :src="row.shopImage" alt="" width="80">
                </template>
            </el-table-column>
            <el-table-column prop="shopAddress" label="地址"></el-table-column>
            <el-table-column prop="shopDescription" label="描述"></el-table-column>
            <el-table-column label="操作" width="170">
                <template #default="{ row }">
                    <el-button type="primary" round @click="openDialog('编辑', row)">编辑</el-button>
                    <el-button type="danger" round @click="handleDelete(row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background layout="prev, pager, next" :total="total" v-model:current-page="pageCode" />


        <el-dialog v-model="dialogVisible" title="Tips" width="500" :before-close="handleClose">
            <el-form>
                <el-form-item label="店铺名称" prop="shopName">
                    <el-input type="text" v-model="currentData.shopName" />
                </el-form-item>
                <el-form-item label="商品地址" prop="shopAddress">
                    <el-input type="text" v-model="currentData.shopAddress" />
                </el-form-item>
                <el-form-item label="店铺描述" prop="shopDescription">
                    <el-input type="text" v-model="currentData.shopDescription" />
                </el-form-item>
                <el-form-item label="店铺电话" prop="shopTel">
                    <el-input type="text" v-model="currentData.shopTel" />
                </el-form-item>
                <el-form-item label="店铺分数" prop="shopScore">
                    <el-input type="text" v-model="currentData.shopScore" />
                </el-form-item>
                <el-form-item label="店铺销售" prop="shopSellCount">
                    <el-input type="text" v-model="currentData.shopSellCount" />
                </el-form-item>
                <el-form-item label="店铺类型" prop="shopType">
                    <el-input type="text" v-model="currentData.shopType" />
                </el-form-item>
                <el-form-item label="店铺图片" prop="shopImage">
                    <el-input type="text" v-model="currentData.shopImage" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="handleOk">
                        确定
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>


<script setup>
import axios from 'axios';
import { ElMessage } from 'element-plus';
import { reactive, ref, watch } from 'vue';

const list = ref([])
const total = ref(0)
// 当前页码
const pageCode = ref(1)
const searchParams = reactive({
    searchValue: '',
    type: '',
    minScore: '',
    maxScore: '',
})
const currentData = ref({});

const getData = () => {
    axios.get('/api/list', { params: { pageCode: pageCode.value, ...searchParams } }).then(res => {
        console.log(res);
        list.value = res.data.data.data
        total.value = res.data.data.totalCount
    })
}
const handleDelete = async id => {
    await axios.delete('/api/list', { params: { id } })+
    getData();
    ElMessage.success('删除成功')
}
const handleOk = () => {
    if (currentData.value.id) {
        axios.post('/api/list', currentData.value).then(() => {
            getData();
            dialogVisible.value = false
        })
    } else {
        axios.put('/api/list', currentData.value).then(() => {
            getData();
            dialogVisible.value = false
        })
    }

}
const openDialog = (title, row) => {
    dialogVisible.value = true;
    if (title === '添加') {
        currentData.value = {}
    } else {
        currentData.value = { ...row }
    }
}


const dialogVisible = ref(false)

const handleClose = (done) => {
    ElMessageBox.confirm('Are you sure to close this dialog?')
        .then(() => {
            done()
        })
        .catch(() => {
            // catch error
        })
}

getData()
// 监听分页器，数据发生变化时就重新请求数据
watch(pageCode, () => {
    getData()
})
</script>